<template>
    <div class="box">
        <el-card header="用户管理表">
            <el-table :data="users" style="width: 100%">
                <el-table-column prop="id" label="编号" width="180">
                </el-table-column>
                <el-table-column prop="username" label="用户名" width="180">
                </el-table-column>
                <el-table-column prop="age" label="年龄" width="180">
                </el-table-column>
                <el-table-column prop="sex" label="性别" width="180">
                </el-table-column>
                <el-table-column prop="phone" label="手机号" width="180">
                </el-table-column>
                <el-table-column label="操作" width="350">
                    <div slot-scope="scope">
                        <el-button type="success" icon="el-icon-circle-plus" @click="$router.push({name:'add'})">添加</el-button>
                        <el-button type="danger" icon="el-icon-delete" @click="del(scope.row.id)">删除</el-button>
                      <el-button type="info" icon="el-icon-edit" @click="$router.push({name:'edit',params:{id:scope.row.id}})">编辑</el-button>
                    </div>
                </el-table-column> 
            </el-table>
        </el-card>
    </div>
</template>
<script>
import $ from "jquery";
export default {
  data() {
    return {
      users: []
    };
  },
  created() {
    this.getUsers();
  },
  methods: {
    getUsers() {
      $.get("http://127.0.0.1:8085/users").done(ret => {
        this.users = ret;
        console.log(ret);
      });
    },
    del(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function() {
        $.get("http://127.0.0.1:8085/users/del", { id: id }).done(() => {
          location.reload();
        });
      });
    }
  }
};
</script>